<template>
	<view class="content">
		<loading v-if="showLoading"></loading>
		<CustomNav :topBgColors="topBgColor" :isArea="true"></CustomNav>
		<swiper class="swiper" style="margin: 20rpx auto;" :style="'margin-top:'+mt" :autoplay="true"
			:indicator-dots="false">
			<swiper-item style="width: 100%;height: 100%;" v-for="item in swiperList" :key="item.id">
				<image style="width: 100%;height: 100%;" :src="item.imgUrl" v-if="item.linkUrl"
					@click="navigate(item.linkUrl)"></image>
				<image style="width: 100%;height: 100%;" :src="item.imgUrl" v-else></image>
			</swiper-item>
		</swiper>
		<view @click="navigate('/page_other/help/help')" class="btn-block">
			<image src="https://jinchang-job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/AIJob.png"
				style="width: 100%;height: 100%;"></image>
		</view>
		<!-- 修改count-block部分 -->
		<view class="count-block2">
			<!-- 使用 swiper 实现垂直滚动 -->
			<swiper class="notice-swiper" 
					vertical 
					autoplay 
					circular 
					interval="3000" 
					duration="500">
				<swiper-item v-for="(item, index) in newsList" :key="index">
					<view class="notice-item2">
						<view class="notice-title">通知公告：</view>
						<view class="notice-content" @click="navigate('/page_other/article/detail?id='+item.id)">
							{{item.title || '暂无公告'}}
						</view>
						<view class="notice-more" @click="navigate('/page_other/article/index?type=2103')">更多></view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- <view class="count-block "> -->
<!-- 			<view class="count-item">
				<view class="count-name FangZhengHanZhenGuangBiaoJianTi">访问量</view>
				<view class="count FangZhengHanZhenGuangBiaoJianTi">{{countList.browseCount}}</view>
			</view>
			<view class="line"></view>
			<view class="count-item">
				<view class="count-name FangZhengHanZhenGuangBiaoJianTi">岗位数</view>
				<view class="count FangZhengHanZhenGuangBiaoJianTi">{{countList.jobCount}}</view>
			</view>
			<view class="line"></view>
			<view class="count-item">
				<view class="count-name FangZhengHanZhenGuangBiaoJianTi">注册人数</view>
				<view class="count FangZhengHanZhenGuangBiaoJianTi">{{countList.customerCount}}</view>
			</view>
			<view class="line"></view>
			<view class="count-item">
				<view class="count-name FangZhengHanZhenGuangBiaoJianTi">企业数</view>
				<view class="count FangZhengHanZhenGuangBiaoJianTi">{{countList.enterpriseCount}}</view>
			</view>
			<view class="line"></view>
			<view class="count-item"> -->
	<!-- 			<view class="count-name FangZhengHanZhenGuangBiaoJianTi">求职成功数</view>
				<view class="count FangZhengHanZhenGuangBiaoJianTi">{{countList.workAppCount}}</view>
			</view> -->
		<!-- </view> -->
		<view v-if="identity==1" class="menu-block1">
			<view @click="item.id==2?toMiniProgram():JumpUrl(item.url)" class="menu-item" v-for="item in menu"
				:key="item.id">
				<image class="menu-icon" mode="widthFix" :src="cloudStorage+item.icon"></image>
				<view class="name">{{item.name}}</view>
			</view>
		</view>
		<view v-else class="menu-block">
			<view @click="item.id==2?toMiniProgram():navigate(item.url)" class="menu-item" v-for="item in menu2"
				:key="item.id">
				<image class="menu-icon" mode="widthFix" :src="cloudStorage+item.icon"></image>
				<view class="name">{{item.name}}</view>
			</view>
		</view>
		<template v-if="identity==2">
			<view class="enter-block">
				<view class="enter-item" @click="navigate('/page_other/position/position_manage')">
					<view class="title">发布岗位</view>
					<view class="button">一键发布</view>
				</view>
				<view class="enter-item" @click="navigate('/pages/found/index')">
					<view class="title">匹配求职者</view>
					<view class="button">一键匹配</view>
				</view>
			</view>
			<view class="live-block">
				<view class="live-item" @click="navigate('/page_other/live/index')">
					<view class="live-title">直播带岗</view>
					<view class="live-text">查看></view>
				</view>
				<view class="live-item" @click="navigate('/page_other/job_hunting/job_fair/index')">
					<view class="live-title">招聘会</view>
					<view class="live-text">查看></view>
				</view>
			</view>
		</template>
		<view class="entrepreneurship" @click="navigate('/page_other/entrepreneurship/entrepreneurship')">
			<image class="entrepreneurship-img" :src="cloudStorage+'entrepreneurship.png'"></image>
		</view>
		<view v-if="identity==1" class="more-features">
			<view class="title">更多功能</view>
			<view class="features-col">
				<view @click="navigate('/page_other/live/index')" class="features-item">
					<view class="title">人社局长</br>直播带岗</view>
					<view class="look">查看></view>
				</view>
				<view @click="navigate('/page_other/job_hunting/job_fair/index')" class="features-item">
					<view class="title">招聘会</view>
					<view class="look">查看></view>
				</view>
			</view>
			<view class="features-col">
				<view @click="navigate('/page_other/obtain_employment/obtain_employment')" class="features-item">
					<view class="title">家门口就业</view>
					<view class="look">查看></view>
				</view>
				<view @click="navigate('/page_other/base_map/publish')" class="features-item">
					<view class="title">地图就业</view>
					<view class="look">查看></view>
				</view>
			</view>
		</view>
		<template v-if="identity==1">
			<view class="list-tab">
				<view @click="tabActive=1" :class="tabActive==1?'active':''" class="tab-item">最新</view>
				<view @click="tabActive=2" :class="tabActive==2?'active':''" class="tab-item">热招职位</view>
				<view @click="tabActive=3" :class="tabActive==3?'active':''" class="tab-item">离我最近</view>
				<view @click="tabActive=4" :class="tabActive==4?'active':''" class="tab-item">热门企业</view>
			</view>
			<view class="list-block">
				<template v-if="tabActive<4">
					<block v-if="list.length>0">
						<view
							@click="navigate('/page_other/job_hunting/job_detail/index?id='+data.id+'&jobType='+data.jobType)"
							class="publish-item" v-for="data in list" :key="item.id">
							<view class="list-info">
								<view class="title-info">
									<view class="title">{{data.jobTitle}}</view>
									<view class="fast-job" v-if="data.worry">急招</view>
									<view v-if="data.isHeat">
										<image style="width: 21px;height: 25px;padding-top: 10rpx;"
											:src="cloudStorage+'heat.png'">
										</image>
									</view>
								</view>
								<view class="detail-item">
									<view class="money-item">
										<view class="wage" v-if="data.minSalary">{{data.minSalary}}-{{data.maxSalary}}元
										</view>
										<view class="wage" v-else>面议</view>
									</view>
									<view class="detail-info">
										<view class="name">{{data.comRecruiters.comPosition}}</view>
										<image mode="aspectFill" :src="data.comRecruiters.user.faceUrl" class="photo"
											v-if="data.comRecruiters.user.faceUrl">
										</image>
										<image mode="aspectFill"
											src="https://jinchang-job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/avatar/Mr.jpg"
											class="photo" v-else>
										</image>
									</view>
								</view>
								<view class="address-item">
									<view class="address iconfont icon-dizhi">{{data.jobAddress}}</view>
									<view class="distance">距离:{{data.distances||0}}km</view>
								</view>
								<view class="label-block">
									<view class="label-item" v-for="label in data.label">{{label}}</view>
								</view>
								<view class="com-item">
									<image :src="data.comRecruiters.enterprise.logoUrl" class="photo"
										v-if="data.comRecruiters.enterprise.logoUrl&&data.comRecruiters.enterprise.logoUrl!=='null'">
									</image>
									<image
										src="https://jinchang-job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/job_hunting/index/enterprise-icon.png"
										class="photo" v-else>
									</image>
									<view class="distance">{{data.comRecruiters.enterprise.enterpriseName}}</view>
								</view>
							</view>
						</view>
					</block>
					<view class="empty" v-else>暂无数据</view>
					<view class="empty" v-if="tabActive==1&&list.length>0" style="margin-bottom: 40rpx; color: #0256FF;"
						@click="navigate('/page_other/job_hunting/job_hunting')">点击查看更多最新职位</view>
				</template>
				<template v-else>
					<view @click="navigate('/page_other/company/company?id='+item.id)" class="enterprise-item"
						v-for="(item,index) in list" :key="item.id">
						<image :src="item.logoUrl " @error="onErrorImg(item)" class="cover-photo" v-if="item.logoUrl">
						</image>
						<image
							src="https://jinchang-job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/job_hunting/index/enterprise-icon.png"
							class="cover-photo" v-else></image>
						<view class="list-info">
							<view class="title">{{item.brandName}}</view>
							<view class="address">
								<view class="add" v-if="item.enterpriseName">{{item.enterpriseName}}</view>
								<view class="add" v-else style="margin-left: 0px;">暂无企业类型</view>
								<view class="add">/ {{item.scaleName||'暂无'}}</view>
							</view>
							<view class="positionCount"><text style="color: #0256FF;">{{item.fairCount||0}}</text>个热招职位
							</view>
						</view>
					</view>
				</template>
			</view>
		</template>
		<template v-else>
			<view class="list-tab">
				<view @click="changeActive1(1)" :class="tabActive2==1?'active':''" class="tab-item">最新</view>
				<view @click="changeActive1(2)" :class="tabActive2==2?'active':''" class="tab-item">推荐</view>
			</view>
			<view v-if="list2.length>0">
				<CustomerList :key="item.id" :data="item" v-for="(item) in list2"></CustomerList>
			</view>
			<view class="empty" v-else>暂无数据</view>
		</template>
		<Tabbar style="position: fixed; left: 0; bottom: 0;z-index:999;"></Tabbar>
	</view>
</template>

<script>
	import CustomNav from '@/components/CustomNav/CustomNav.vue';
	import CustomerList from "@/components/CustomerList.vue";
	import {
		getPublishApi,
		getHotEnterprise,
		getCustomerListApi
	} from '@/api/job_hunting.js'
	import {
		getNewsList as getNewsListApi,appletQueryList
	} from '@/api/notice.js'
	import {
		getSwiperList as getSwiperListApi,
		addBrowseApi,
		getIndexCountApi
	} from '@/api/static.js'
	import {
		getUser
	} from '@/api/user.js'
	import {
		getStorage
	} from '@/util/auth'
	export default {
		components: {
			CustomNav,
			CustomerList
		},
		data() {
			return {
				menu: [{
						id: 1,
						name: '招聘求职',
						url: '/page_other/job_hunting/job_hunting',
						icon: 'menu-01.png'
					},
					{
						id: 12,
						name: '零工市场',
						url: '/page_market/work/search?type=0',
						icon: 'menu-02.png'
					},
					{
						id: 3,
						name: '技能培训',
						url: '/page_other/train/index',
						icon: 'menu-03.png'
					},
					{
						id: 4,
						name: '政策法规',
						url: '/page_other/policy/title?type=1',
						icon: 'menu-04.png'
					},
					// {
					// 	id: 9,
					// 	name: '通知公告',
					// 	url: '/page_other/article/index?type=2103',
					// 	icon: 'menu-05.png'
					// },
					{
						id: 5,
						name: '我要维权',
						url: '/page_other/project_right/index/index',
						icon: 'menu-11.png'
					},
					{
						id: 6,
						name: '问卷调查',
						url: '/page_other/survey/index',
						icon: 'menu-12.png'
					},
					// {
					// 	id: 7,
					// 	name: '名企招聘',
					// 	url: '/page_other/special_recruitment/enterprise',
					// 	icon: 'menu-13.png'
					// },
					{
						id: 7,
						name: '意见反馈',
						url: '/page_other/feedback/feedback',
						icon: 'feedback.png'
					},
					{
						id: 10,
						name: '典型宣传',
						url: '/page_other/disseminate/disseminate',
						icon: 'menu-06.png'
					}, {
						id: 8,
						name: '投诉举报',
						url: '/page_other/complain/complain',
						icon: 'menu-14.png'
					}
				],
				menu2: [{
						id: 1,
						name: '招聘英才',
						url: '/page_other/job_hunting/job_hunting',
						icon: 'menu-01.png'
					},
					{
						id: 12,
						name: '零工市场',
						url: '/page_market/release/index',
						icon: 'menu-02.png'
					},
					{
						id: 3,
						name: '创业服务',
						url: '/page_other/serve/index',
						icon: 'menu-05.png'
					},
					{
						id: 4,
						name: '惠企政策',
						url: '/page_other/policy/title?type=2',
						icon: 'menu-04.png'
					},
				],
				tabActive: 1,
				tabActive2: 1,
				list: [],
				list2: [],
				latitude: 0,
				longitude: 0,
				newsList: [],
				swiperList: [],
				countList: [],
				com: {
					isPublish: 1
				},

			}
		},
		watch: {
			tabActive: {
				immediate: true,
				handler(val) {
					this.tabActive == val;

					if (this.identity == 1) {
						if (val !== 4) {
							uni.showLoading({
								title: '加载中',
								mask: true
							})
							this.getPublish();
						} else {
							uni.showLoading({
								title: '加载中',
								mask: true
							})
							this.getEnterprise()
						}
					}



				}
			}
		},

		methods: {
			getNewsList2() {
				appletQueryList({
					page: 1,
					limit: 10,
					type: 2103
				}).then((res) => {
					this.newsList = res.list
				})
			},
			JumpUrl(url) {
				if (url == '/page_other/project_right/index/index') {
					this.showToast('系统正在升级维护中~')
					return
				}
				uni.navigateTo({
					url
				})
			},
			changeActive1(e) {

				this.tabActive2 = e
				if (this.tabActive2 == 2) {
					if (!this.user) {
						this.list2 = []
						uni.showModal({
							title: '提示',
							content: '需要先登录！',
							cancelText: '先逛逛',
							confirmText: '去登录',
							success(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/page_other/login/select'
									})
								} else {
									this.tabActive2 = 1
								}
							}
						})
					} else {
						this.getComInfo()
					}
				} else {
					// uni.showLoading({
					// 	title: '加载中',
					// 	mask: true
					// })
					this.getCustomerList()
				}
			},
			getCustomerList() {
				return getCustomerListApi({
					orderDate: this.tabActive2 == 1 ? 1 : 0,
					page: 1,
					limit: 5
				}).then(res => {
					this.list2 = res.list
				})
			},
			toMiniProgram(appId) {
				uni.navigateToMiniProgram({
					appId: 'wx63326d0b5a594b38', // 填入目标小程序的 appId
					path: 'pages/index/index',
				})
			},
			//onShareAppMessage 分享给朋友
			onShareAppMessage: function(res) {
				if (res.from === 'button') {

				}
				return {
					title: '酒泉码上就业',
					path: '/pages/home/index'
				}
			},
			onErrorImg(item) {
				this.$set(item, 'logoUrl', this.cloudStorage + '/job_hunting/index/enterprise-icon.png');
			},
			addBrowse() {
				addBrowseApi()
			},
			getSwiperList() {
				if (this.$store.getters.identity) {
					return getSwiperListApi({
						userType: this.$store.getters.identity,
						seat: 1
					}).then((res) => {
						this.swiperList = res ?? []
					})
				}

			},
			getPublish() {
				uni.getLocation({
					isHighAccuracy: true,
					success: (current) => {
						this.latitude = current.latitude;
						this.longitude = current.longitude;
						uni.setStorageSync('latitude', this.latitude)
						uni.setStorageSync('longitude', this.longitude)
						let parameter = {
							orderDate: 0,
							distances: 0,
							orderDistance: 0,
							distances: 0,
						}
						if (this.tabActive == 1) {
							parameter.orderDate = 1;
						}
						if (this.tabActive == 2) {
							parameter.distances = 1;
						}
						if (this.tabActive == 3) {
							parameter.orderDistance = 1;
							parameter.distances = 2;
						}
						return getPublishApi({
							page: 1,
							limit: 5,
							longitude: this.longitude,
							latitude: this.latitude,
							...parameter
						}).then((res) => {
							uni.hideLoading()
							this.list = res.list;
						})
					},
					fail: (e) => {
						this.showToast('获取位置失败，请重试！');
					}
				})
			},
			getIndexCount() {
				return getIndexCountApi().then((res) => {
					this.countList = res ?? [];
				})
			},
			getEnterprise() {
				return getHotEnterprise({
					page: 1,
					limit: 5,
					isFamous: 1
				}).then(res => {
					this.list = res.list;
				})
			},
			getNewsList() {
				return getNewsListApi({
					page: 1,
					limit: 10
				}).then(res => {
					this.newsList = res.list;
				})
			},

			getComInfo() {
				getUser({
					type: 2
				}).then((res) => {
					this.com = res
					if (this.com.isPublish == 2) {
						this.list2 = []
						uni.showModal({
							title: '提示',
							content: '请先发布岗位！',
							cancelText: '先逛逛',
							confirmText: '去发布',
							success(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/page_other/position/position_manage'
									})
								} else {
									this.tabActive2 = 1
								}
							}
						})
					} else {
						// uni.showLoading({
						// 	title: '加载中',
						// 	mask: true
						// })
						this.getCustomerList();
					}
				})
			}
		},
		computed: {
			identity() {
				return this.$store.getters.identity
			},
			user() {
				return this.$store.getters.user
			}
		},
		onShow() {
			this.getIndexCount()
			this.getSwiperList()
			console.log(1111)
			this.getNewsList2()
		},
		onLoad() {
			this.tabActive = 1;
			this.tabActive2 = 1;
			this.$store.dispatch('position/getPosition')
			uni.$on('areaChange', (data) => {
				this.tabActive = 1;
				this.tabActive2 = 1;
				if (this.identity == 2) {
					this.getCustomerList();
				} else {
					this.getPublish();
				}
			})
			uni.showCustomLoading()
			Promise.all([this.getCustomerList(), this.getSwiperList(), this.getIndexCount()]).finally(
				() => {
					uni.hideCustomLoading()
				});
			this.addBrowse();
			if (!this.$store.getters.identity) {
				uni.reLaunch({
					url: '/pages/index/index'
				})
				return;
			}
		},
		onUnload() {
			uni.$off('areaChange')
		}
	}
</script>

<style lang="scss">
	page {
		background-image: $custom-background-gradient;
		background-repeat: no-repeat;
	}

	.content {
		overflow: hidden;
		padding-bottom: 190rpx;

		.enter-block {
			width: $content-width;
			margin: 30rpx auto;
			display: flex;
			justify-content: space-between;

			.enter-item {
				width: calc(50% - 15rpx);
				height: 170rpx;
				border-radius: 8px;
				padding: 0 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.title {
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.button {
					width: 130rpx;
					height: 50rpx;
					color: #fff;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: linear-gradient(to right, #1C86FE, #26E0E7);
					border-radius: 20px;
				}
			}

			.enter-item:nth-child(1) {
				background: #fff url('https://jinchang-job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/college-graduates.png') no-repeat center right;
				background-size: auto 80%;
			}

			.enter-item:nth-child(2) {
				background: #fff url('https://jinchang-job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/enterprise-library.png') no-repeat center right;
				background-size: auto 80%;
			}
		}
		
		.count-block2 {
			width: calc(100% - 60rpx);
			margin: 20rpx auto;
			background: #fff;
			border-radius: 8px;
			padding: 20rpx 30rpx;
			box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.05);
			
			.notice-swiper {
				height: 60rpx; // 保持与原来一致的高度
				line-height: 60rpx;
			}
			
			.notice-item2 {
				display: flex;
				align-items: center;
				width: 100%;
				height: 100%;
				
				.notice-title {
					font-size: 28rpx;
					color: #0256FF;
					font-weight: bold;
					white-space: nowrap;
					margin-right: 15rpx;
				}
				
				.notice-content {
					font-size: 28rpx;
					color: #666;
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				
				.notice-more {
					font-size: 26rpx;
					color: #999;
					margin-left: 20rpx;
					white-space: nowrap;
				}
			}
		}


		.count-block {
			width: calc(100% - 60rpx);
			margin: 20rpx auto;
			background: #fff;
			border-radius: 5px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0;
			font-size: 24rpx;
			position: relative;

			.count-item {
				width: calc((100% - 8px)/5);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.count {
					color: #346FFE;
					margin-top: 15rpx;
				}
			}

			.line {
				height: 48rpx;
				width: 2px;
				border-radius: 100%;
				background-image: linear-gradient(#fff, rgba(49, 108, 254, 0.5), #fff);
			}
			
		}

		.live-block {
			width: $content-width;
			margin: 30rpx auto;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.live-item:nth-child(1) {
				background: url('https://jinchang-job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/live_bg.png') no-repeat center;
				background-size: 100% 100%;
			}

			.live-item:nth-child(2) {
				background: url('https://jinchang-job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/fair_bg.png') no-repeat center;
				background-size: 100% 100%;
			}

			.live-item {
				width: calc(50% - 15rpx);
				padding: 30rpx;
				height: 180rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;


				.live-text {
					font-size: 28rpx;
					color: #0256FF;
					margin-top: 20rpx;
				}
			}
		}

		.banner {
			width: $content-width;
			display: block;
			margin: 0 auto;
			border-radius: 8px;
		}

		.swiper {
			margin: 0 auto;
			width: $content-width;
			border-radius: 8px;
			overflow: hidden;
			height: 320rpx;
		}

		.btn-block {
			position: fixed;
			right: 20rpx;
			bottom: 160rpx;
			z-index: 999;
			width: 140rpx;
			height: 140rpx;
			color: #333;
			font-size: 28rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: #fff;
			border-radius: 50%;
			box-shadow: 0 0 18rpx 0 #dddddd;

			.btn-icon {
				width: 50rpx;
				height: 50rpx;
				text-align: center;
				font-size: 56rpx;
				margin-bottom: 10rpx;
			}

			.name {
				text-align: center;
				width: 100%;
			}
		}

		.notice-block {
			width: $content-width;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			margin: 30rpx auto;
			height: 110rpx;

			.notice-img {
				width: 140rpx;
				height: 120rpx;
				padding: 0 20rpx;
			}

			.notice-item {
				width: calc(100% - 140rpx);
				display: flex;
				align-items: center;
				height: 80rpx;
				border-radius: 20rpx;

				.name {
					background: linear-gradient(to right, #1C92FB 30%, #1EBAF1 60%, #21DBE8 90%);
					background-clip: text;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					font-size: 32rpx;
					width: 140rpx;
				}

				.swiper-item {
					width: calc(100% - 140rpx);
					height: 50rpx;

					.notice-list {
						width: 100%;
						height: 80rpx;
						margin-top: 2rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 30rpx;
					}
				}
			}
		}

		.menu-block1 {
			width: $content-width;
			margin: 30rpx auto;
			background: #FFFFFF;
			border-radius: 8px;
			padding: 30rpx;
			padding-bottom: 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			//justify-content: space-between;
			.menu-item:nth-child(5n) {
				margin-right: 0;
			}

			.menu-item {
				width: calc(20% - 20rpx);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-bottom: 30rpx;
				margin-right: 20rpx;

				.menu-icon {
					width: 64%;
				}

				.name {
					font-size: 26rpx;
					margin-top: 14rpx;
				}
			}
		}

		.menu-block {
			width: $content-width;
			margin: 0 auto;
			background: #FFFFFF;
			border-radius: 8px;
			padding: 30rpx;
			padding-bottom: 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.menu-item {
				width: calc(25% - 20rpx);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-bottom: 30rpx;

				.menu-icon {
					width: 50%;
				}

				.name {
					font-size: 28rpx;
					margin-top: 14rpx;
				}
			}
		}

		.banner-menu {
			width: $content-width;
			margin: 30rpx auto;
			display: flex;
			justify-content: space-between;

			.full-menu,
			.normal-menu {
				width: calc(50% - 15rpx);
			}

			.full-menu {
				border-radius: 8px;
				overflow: hidden;

				.media-icon {
					width: 100%;
					height: 100%;
				}

			}

			.normal-menu {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				background-color: #fff;

				.normal-item {
					width: 100%;
					height: calc(50% - 15rpx);
					border-radius: 8px;
					padding: 15rpx;
					display: flex;
					flex-direction: column;

					.title {
						font-weight: bold;
						margin-bottom: 10rpx;
					}

					.sub-title {
						font-size: 24rpx;
						color: #999;
						margin-bottom: 20rpx;
					}

					.button {
						width: 120rpx;
						height: 46rpx;
						color: #fff;
						font-size: 26rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: linear-gradient(to right, #1C86FE, #26E0E7);
						border-radius: 20px;
					}
				}

				.normal-item:nth-child(1) {
					background: #fff url('https://jinchang-job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/college-graduates.png') no-repeat center right;
					background-size: auto 80%;
				}

				.normal-item:nth-child(2) {
					background: #fff url('https://jinchang-job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/enterprise-library.png') no-repeat center right;
					background-size: auto 80%;
				}
			}
		}

		.entrepreneurship {
			width: $content-width;
			height: 200rpx;
			margin: auto;

			.entrepreneurship-img {
				width: 100%;
				height: 100%;
			}
		}

		.more-features {
			width: $content-width;
			margin: 0 auto;
			padding: 30rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			background: #fff;
			border-radius: 8px;

			.title {
				font-weight: bold;
				margin-bottom: 20rpx;
				width: 100%;
			}

			.features-col {
				width: calc((100%/2) - 10rpx);
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.features-item {
					padding: 0 20rpx;
					padding-top: 30rpx;
					height: calc(50% - 15rpx);
					border-radius: 5px;
					height: 170rpx;
					margin-bottom: 10rpx;

					.title {
						font-weight: normal;
						font-size: 30rpx;
					}

					.look {
						font-size: 26rpx;
						color: #0256FF;
					}
				}

			}

			.features-col:nth-child(2) {
				.features-item:nth-child(1) {
					background: url('https://jinchang-job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/bg_1.png') no-repeat right bottom;
					background-size: 100% 100%;
				}

				.features-item:nth-child(2) {
					background: url('https://jinchang-job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/bg_2.png') no-repeat right bottom;
					background-size: 100% 100%;
				}
			}

			.features-col:nth-child(3) {
				.features-item:nth-child(1) {
					background: url('https://jinchang-job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/bg_3.png') no-repeat right bottom;
					background-size: 100% 100%;
				}

				.features-item:nth-child(2) {
					background: url('https://jinchang-job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/bg_4.png') no-repeat right bottom;
					background-size: 100% 100%;
				}
			}
		}

		.list-tab {
			width: $content-width;
			margin: 30rpx auto;
			display: flex;

			.tab-item {
				font-weight: bold;
				margin-right: 30rpx;
			}

			.tab-item.active {
				color: #0256FF;
			}
		}

		.list-block {
			width: $content-width;
			margin: 0 auto;

			.publish-item {
				width: 100%;
				background: #fff;
				border-radius: 10rpx;
				box-shadow: 0 0 10px 0 #efefef;
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				margin-bottom: 20rpx;

				.detail-info {
					width: 260rpx;
					//height: 200rpx;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: center;
					align-items: center;

					.name {
						width: 110rpx;
						font-size: 24rpx;
						color: #999;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						text-align: center;
						text-indent: 15rpx;
					}

					.photo {
						width: 70rpx;
						height: 70rpx;
						border-radius: 100%;
						background: #efefef;
					}

					.apply-btn {
						border: 1px solid #0256FF;
						border-radius: 8rpx;
						color: #0256FF;
						font-size: 24rpx;
						padding: 8rpx 28rpx;
						position: relative;
						left: 30rpx;
					}
				}

				.list-info {
					// width: calc(100% - 180rpx);
					width: 100%;
					display: flex;
					flex-direction: column;

					>view {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.title-info {
						display: flex;
						flex-direction: row;
						align-items: center;

						.title {
							color: #000;
							font-weight: bold;
							font-size: 34rpx;
						}

						.fast-job {
							width: 60rpx;
							height: 38rpx;
							border: 1rpx solid #0256FF;
							font-size: 24rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #0256FF;
							margin-left: 20rpx;
							border-radius: 6rpx;
						}
					}

					.detail-item {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.money-item {
							margin-top: 20rpx;

							.wage {
								color: #0256FF;
								font-size: 36rpx;
								font-weight: bold;

								.unit {
									font-size: 28rpx;
									font-weight: normal;
								}
							}
						}

						.detail-info {
							width: 180rpx;
							// height: 200rpx;
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							justify-content: center;
							align-items: center;

							.name {
								width: 110rpx;
								font-size: 24rpx;
								color: #999;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								text-align: center;
								text-indent: 15rpx;
							}

							.photo {
								width: 70rpx;
								height: 70rpx;
								border-radius: 100%;
								background: #efefef;
							}
						}
					}

					.address-item {
						display: flex;
						justify-content: space-between;

						.address {
							width: 440rpx;
							color: #999;
							font-size: 26rpx;
							margin-top: 20rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.distance {
							color: #999;
							font-size: 26rpx;
							margin-top: 20rpx;
						}
					}

					.com-item {
						border-top: 1px solid #f3ebeb;
						display: flex;
						padding-top: 20rpx;

						.photo {
							width: 50rpx;
							height: 50rpx;
							border-radius: 100%;
							background: #efefef;
						}

						.distance {
							color: #000;
							font-size: 30rpx;
							margin: 8rpx 0rpx 0rpx 20rpx;
							width: calc(100% - 60rpx);
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.label-block {
						font-size: 24rpx;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: left;
						margin-top: 20rpx;

						.label-item {
							padding: 8rpx 20rpx;
							background: #F5F6F8;
							color: #999;
							margin: 0 10rpx 20rpx 0;
						}
					}

					.wage {
						color: #0256FF;
						font-size: 36rpx;
						font-weight: bold;

						.unit {
							font-size: 28rpx;
							font-weight: normal;
						}
					}
				}
			}

			.enterprise-item {
				width: 100%;
				background: #fff;
				border-radius: 10rpx;
				box-shadow: 0 0 10px 0 #efefef;
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				margin: 20rpx auto;

				.cover-photo {
					width: 150rpx;
					height: 150rpx;
					margin-right: 20rpx;
					border-radius: 20rpx;

				}

				.list-info {
					width: 70%;
					display: flex;
					flex-direction: column;

					view {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.title {
						color: #000;
						font-weight: bold;
						font-size: 34rpx;
					}

					.address {
						display: flex;
						flex-direction: row;

						.add {
							color: #999;
							font-size: 26rpx;
							margin-top: 20rpx;
						}
					}

					.city {
						color: #999;
						font-size: 26rpx;
						margin-left: 4rpx;
					}

					.imgs2 {
						width: 17px;
						height: 17px;
						margin-left: 70rpx;
						vertical-align: bottom;
					}

					.positionCount {
						font-size: 28rpx;
						margin-top: 20rpx;
					}

					.label-block {
						font-size: 24rpx;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: left;
						margin-top: 20rpx;

						.label-item {
							padding: 8rpx 20rpx;
							background: #F5F6F8;
							color: #999;
							margin: 0 10rpx 20rpx 0;
						}
					}
				}
			}

			.person-item {
				width: 100%;
				background: #fff;
				border-radius: 10rpx;
				box-shadow: 0 0 10px 0 #efefef;
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 0 30rpx;
				margin-bottom: 30rpx;
			}
		}
	}
</style>
<style scoped>
	.uniappBgdCol {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 1000;
		-moz-opacity: 0.6;
		opacity: .6;
		filter: alpha(opacity=88);
	}

	.uniappContant {
		position: fixed;
		top: 30%;
		left: 55%;
		width: 70%;
		min-height: 45%;
		margin-left: -40%;
		background-color: white;
		z-index: 1001;
		border-radius: 20rpx;
	}

	.uniappContant1 {
		position: fixed;
		top: 40%;
		left: 55%;
		width: 70%;
		min-height: 20%;
		margin-left: -40%;
		background-color: white;
		z-index: 1001;
		border-radius: 20rpx;
	}
</style>